<template>
	<div class="card">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card shadow="never">
					<p>只设置目标数字</p>
					<div class="group">
						<CountUp :end="100" />
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="never">
					<p>设置起止数值</p>
					<div class="group">
						<CountUp :start="14" :end="100" />
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="never">
					<p>小数位数</p>
					<div class="group">
						<CountUp :end="100" :decimals="2" />
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="never">
					<p>动画时长</p>
					<div class="group">
						<CountUp :end="100" :duration="6" />
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="never">
					<p>回调函数</p>
					<div class="group">
						<CountUp
							:end="100"
							:callback="
								() => {
									className = 'end'
								}
							"
							:class="className"
						/>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="never">
					<p>结束一秒后更新数值</p>
					<div class="group">
						<CountUp :end="end" :callback="update" />
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script setup lang="ts" name="CountUpDome">
import { ref } from 'vue'
import CountUp from '@/components/CountUp/index.vue'
const className = ref()
const end = ref(50)
const update = () => {
	setTimeout(() => {
		end.value = 100
	}, 1000)
}
</script>

<style lang="scss" scoped>
.el-card {
	margin-bottom: 20px;
}
.group {
	display: flex;
	align-items: center;
	justify-content: center;
	span {
		font-size: 60px;
		&.end {
			padding: 0 20px;
			color: #ffffff;
			background-color: var(--el-color-primary);
			border-radius: 4px;
		}
	}
}
</style>
